<template>
      <!-- 返回上一个页面 -->
    <van-nav-bar
        title="修改地址"
        left-text="返回"
        left-arrow
        @click-left="back"
    />

    <!-- 新增表单 -->
    <!-- 新增加是，可以设置初始化值address-info，(根据插件格式跟用户信息，设置初始化) -->
    <van-address-edit
        :area-list="areaList"
        show-set-default
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        :address-info="AddressInfo"
        show-delete
        @save="save"
        @delete="del"
    />

</template>
<script>
// 引入地区数据
import {areaList} from '@vant/area-data';
    export default {
        name:'AddressEdit',
        // 当页面进来时，就要得到 addrid (addrid进来时，先设置addrid为0)
        created() {
            // 接收参数 地址id(接收到id时这一步就把下，addrid=0 的值覆盖掉了)
            this.addrid=this.$route.query ? this.$route.query.addrid : 0

            // console.log(this.addrid);
            
            // 接收完参数立刻调用，info 查询 地址方法
            this.info()
        },
        
        data() {
            return {
              addrid:0,//设置传过来为0
              areaList,
              AddressInfo:{},
              LoginUser:this.$cookies.get('LoginUser'),
            };
        },

        methods: {
            back()
            {
                this.$router.go(-1)
            },

            // 请求当前编辑的收获地址
            async info()
            {
                // 组装数据
                var data={
                    userid:this.LoginUser.id,
                    addrid:this.addrid
                }
                // 调用接口
                var result=await this.$api.AddressInfo(data)

                // 请求失败
               if(result.code==0)
               {
                    // 提示信息
                    this.$notify({
                        type:'danger',
                        message:result.msg,
                        duration:1000,
                        onClose:()=>{
                        this.$router.go(-1)
                        }
                    })
                    return false
               }

                var data=result.data

                // 组装数据
                var address={
                    name:data.consignee,
                    tel:data.mobile,
                    addressDetail:data.address,
                    isDefault:data.status == 1 ? true : false
                }

                if(data.province)
                {
                    address.province=data.provinces.name
                    address.areaCode=data.province
                }


                if(data.city)
                {
                    address.city=data.citys.name
                    address.areaCode=data.city
                }

                if(data.district)
                {
                    address.district=data.districts.name
                    address.areaCode=data.district
                }
                // 将最后数据覆盖上面的AddressInfo
                this.AddressInfo=address
  
            },

            // 保存地址方法（返回的是用户填写的表单内容 ，要了解创建的功能，跟返回值）
            async save(content)
            {
                
                // 组装数据
                var data={
                    addrid:this.addrid,
                    consignee:content['name'],
                    // mobile:content['tel'],
                    mobile:content.tel,//点与括号，写法效果一样
                    code:content['areaCode'],
                    address:content['addressDetail'],
                    status:content['isDefault'] ? 1 : 0,
                    userid:this.LoginUser.id
                }
                
                // 调用接口
                var result=await this.$api.AddressEdit(data);

                if(result.code==1)
                {
                    //  成功返回上一个页面
                   this.$notify({
                       type:'success',
                       message:result.msg,
                       duration:1000,
                       onClose:()=>{
                           this.$router.go(-1)
                       }
                   })
                }else
                {
                    // 失败留在当前页面(啥也不敢就行)
                    this.$notify({
                        type:'danger',
                        message:result.msg,
                        duration:1000,
                    })
                }
            },

            // 删除地址
            async del(content)
            {
                // 先弹出对话框
                this.$dialog.confirm({
                    title:'标题',
                    message:'是否确认删除收货地址'
                }).then(async()=>{
                    // 组装数据
                    var data={
                        userid:this.LoginUser.id,
                        addrid:this.addrid
                    }

                    // 调接口
                    var result =await this.$api.AddressDel(data)
                    
                    if(result.code==1)
                    {
                        // 删除成功
                        this.$notify({
                            type:'success',
                            message:result.msg,
                            duration:1000,
                            onClose:()=>{
                                this.$router.go(-1)
                            }
                        })
                    }else
                    {
                        // 失败
                        this.$notify({
                            message:result.msg,
                            duration:1000,
                        })
                        return
                    }
                }).catch(()=>{})
            }
        },
    }
</script>